<template>
  <div class="page">
    <div class="img-main">
      <div class="img-box" v-if="true">
        <div class="img-thumbnail thumbnail" :style="{backgroundImage: 'url(' + imgItem + ')' }" v-for="(imgItem, imgIndex) in files" :key="imgIndex" @click.stop="showPicture(imgIndex)">
          <span class="del" @click.stop="delImg(imgIndex)">
            <x-icon style="fill: #b8bdae;" type="ios-close" size="24"></x-icon>
          </span>
        </div>
        <div class="img-thumbnail" v-show="files.length != 9" style="text-align: center;background: #f7f7f7;">
          <i class="iconfont icon-tainjia upload-icon"></i>
          <input ref="upload" @change="upload" class="input-img" type="file" accept="image/*" multiple="multiple">
        </div>
      </div>
    </div>
    <previewer :list="list" ref="previewer" @on-close="list = []"></previewer>
  </div>
</template>

<script>
import { XHeader } from "vux";
import { Divider } from "vux";
import { Previewer } from "vux";

export default {
  components: {
    XHeader,
    Divider,
    Previewer
  },
  data() {
    return {
      files: [],
      list: []
    };
  },

  methods: {
    //  查看图片
    showPicture(index) {
      this.files.map(item => {
        this.list.push({ src: item });
      });
      this.$refs.previewer.show(index);
    },
    //  将文件流转化为url
    getUrl(file) {
      return file ? URL.createObjectURL(file) : null;
    },
    //  上传图片
    upload(e) {
      var that = this;
      const files = e.target.files;
      let n = this.files.length;
      let flag = false;
      for (let i = 0; i < files.length; i++) {
        if (i >= 9 - n) {
          flag = true;
          break;
        }
        canvasDataURL(this.getUrl(files[i]), i, {}, (baseUrl, m) => {
          that.files.splice(m + n, 0, baseUrl);
        });
      }
      if (flag) {
        this.$vux.alert.show({
          content: "最多上传9张图片！"
        });
      }
      this.$refs.upload.value = "";
    },
    //  删除图片
    delImg(index) {
      this.files.splice(index, 1);
    }
  }
};

//  压缩图片
function canvasDataURL(path, i, obj, callback) {
  var img = new Image();
  img.src = path;
  img.onload = function() {
    var that = this;
    // 默认按比例压缩
    var w = that.width,
      h = that.height;
    var quality = 0.1;
    //生成canvas
    var canvas = document.createElement("canvas");
    canvas.width = w;
    canvas.height = h;
    var ctx = canvas.getContext("2d");
    //获取图片方向
    var orient;
    EXIF.getData(img, function() {
      orient = EXIF.getTag(this, "Orientation");
      //如果图片方向等于6 ，则旋转矫正，反之则不做处理
      if (orient == 6) {
        canvas.width = h;
        canvas.height = w;
        ctx.save();
        ctx.rotate((90 * Math.PI) / 180);
        ctx.drawImage(img, 0, -h);
        ctx.restore();
      } else {
        ctx.drawImage(img, 0, 0, w, h);
      }
      // ctx.drawImage(that, 0, 0, w, h);
      // 图像质量
      if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
        quality = obj.quality;
      }
      // quality值越小，所绘制出的图像越模糊
      var base64 = canvas.toDataURL("image/jpeg", quality);
      // 回调函数返回base64的值
      callback(base64, i);
    });
  };
}
</script>

<style lang="less" scoped>
.img-main {
  font-size: 12px;
  background: #f5f5f5;
  overflow: auto;
  padding-bottom: 50px;
  
}
.img-box {
  overflow: hidden;
  padding: 10px 10px;
  position: relative;
  min-height: 100px;
  background: #fff;
  .img-thumbnail {
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
    position: relative;
    float: left;
    margin-right: 8px;
    margin-bottom: 10px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    &:nth-of-type(3n) {
      margin-right: 0;
    }
    .del {
      position: absolute;
      top: 0;
      right: 0;
    }
    .upload-icon {
      font-size: 60px;
      color: #ccc;
      line-height: 100px;
    }
  }
  .input-img {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}
</style>



